<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="switchTabs">
          <el-tab-pane label="出库设置" name="code">
            <CodeCard ref="codeCard" :active_name="String(activeName)" />
          </el-tab-pane>

          <el-tab-pane label="出入库类型" name="field">
            <OutField ref="outField" />
          </el-tab-pane>
          <!-- <el-tab-pane label="入库字段" name="ware">
            <WareCard ref="wareCard" />
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import CodeCard from './components/CodeCard/index.vue'
  import OutField from './components/OutField/index.vue'
  // import WareCard from './components/WareCard/index.vue'
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import type { TabsPaneContext } from 'element-plus'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.storageSet,
  })

  const route = useRoute()
  const activeName = route.query.active == undefined ? 'code' : route.query.active

  const codeCard = ref()
  const outField = ref()

  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    if (tab.props.name == 'code') {
      codeCard.value.getCodeSet()
    }
  }
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
